<template>
	<view class="pb-100 page-bg">
		<!-- 自定义导航栏 -->
		<view>
			<view class="page-bg" style="position:fixed;top:0;width: 100%;z-index: 10;">
				<view :style="{ height: navBarHeightInfo.statusBarHeight + 'px' }"></view>
				<view class="flex f-row-nowrap f-ai-center page-bg" :style="{ height: navBarHeightInfo.titleBarHeight + 'px' }">
					<view class="cfs-0e0e0e fs-40 fw-500 mr-34 pl-32">标题</view>
					<view class="flex f-row-nowrap f-ai-center pt-12 pl-24 pr-100 pb-12 radius-40 border-fff"
						style="width: fit-content;background-color: rgba(255,255,255,0.4);">
						<text class="iconfont icon-search fs-34 cfs-7a7a7a"></text>
						<text class="cfs-7a7a7a fs-32">搜索</text>
					</view>
				</view>
			</view>
			<view :style="{ height: navBarHeightInfo.navBarHeight + 'px' }"></view>
		</view>

		<u-swiper :list="list1" previousMargin="30rpx" nextMargin="30rpx" circular autoplay bgColor="#ffffff"
			height="260rpx" indicator indicatorMode="dot"></u-swiper>
		<view class="ml-30 mr-30 mt-30 mb-60">
			<u-notice-bar :text="text4" direction="column" mode="link" bgColor="#f9f9f9" color="#48c998"></u-notice-bar>
		</view>
		<view class="ml-30 mr-30 flex f-row-nowrap f-ai-center h-40">
			<view class="cfs-0e0e0e fs-40 fw-500 flex-1">每日推荐</view>
			<text class="iconfont icon-rili cfs-58b28f fs-38"></text>
			<text class="cfs-58b28f fs-26 ml-8">{{ date }}</text>
		</view>
		<view class="ml-30 mt-30 mb-60">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view v-for="item in 6" :key="item" style="width: 200rpx;height: 430rpx;overflow: hidden;"
					class="inline-block mr-16 radius">
					<image src="/static/images/preview_small.webp" mode="aspectFill" style="width:100%;height: 100%;" />
				</view>
			</scroll-view>
		</view>
		<view class="ml-30 mr-30 mb-40 flex f-row-nowrap f-ai-center h-40">
			<view class="cfs-0e0e0e fs-40 fw-500 flex-1">专题精选</view>
			<text class="cfs-7a7a7a fs-26">More+</text>
		</view>
		<view class="mr-30 ml-30 grid"
			style="grid-template:344rpx/repeat(3,1fr);grid-gap:14rpx 16rpx;grid-auto-rows: 344rpx;">
			<view v-for="item in 8" :key="item" class="radius hidden" style="position: relative;" @click="goClassListPage">
				<image src="/static/images/classify3.webp" mode="aspectFill"></image>
				<view class="pt-16 pb-16 pl-10 pr-10 cbg-d48966 cfs-fff fs-24 flex f-ai-center f-jc-center"
					style="position: absolute;top:0;border-radius: 20rpx 0 20rpx 0;"><text
						class="w-8 h-8 inline-block radius cbg-fff mr-8"></text>2月前更新</view>
				<view class="h-70 cbg-blur fs-28 cfs-fff flex f-ai-center f-jc-center"
					style="position: absolute;width: 100%;bottom: 0;">运动</view>
			</view>

			<view class="radius hidden" style="position: relative;" @click="goClassifyTab">
				<view class="cbg-grad1" style="width:100%;height:100%;"></view>
				<view class="cbg-blur flex f-column-nowrap f-ai-center f-jc-center"
					style="position: absolute;top:0;width: 100%; height: 100%;">
					<text class="iconfont icon-more fs-58 cfs-fff"></text>
					<text class="cfs-fff fs-32">更多</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import { formatDate } from '@/utils/share'

import { createNamespacedHelpers } from 'vuex'
const { mapState: RouteQueryStates, mapMutations: RouteQueryMapMutations } = createNamespacedHelpers('RouteQuery')
export default {
	name: 'HomePage',
	data() {
		return {
			list1: [
				require('@/static/images/banner1.jpg'),
				require('@/static/images/banner2.jpg'),
				require('@/static/images/banner3.jpg'),
			],
			text4: [
				'寒雨连江夜入吴',
				'平明送客楚山孤',
				'洛阳亲友如相问',
				'一片冰心在玉壶'
			],
			date: ''

		}
	},
	created() {
		formatDate(new Date(), (dateInfo) => {
			this.date = dateInfo.day + '日'
		})
	},
	computed: {
		navBarHeightInfo() {
			return this.$globalData.navBarHeightInfo
		}
	},

	methods: {
		...RouteQueryMapMutations({
			setHome2classlistQuery: 'setHome2classlistQuery'
		}),
		goClassListPage() {
			this.setHome2classlistQuery({ home2classlistQuery: { a: 1, b: { name: 'zs' } } })
			uni.navigateTo({ url: '/subpkg_classlist/classlist/classlist' })
		},
		// 点击更多跳转底部分类tab
		goClassifyTab() {
			uni.switchTab({
				url: '/pages/classify/classify'
			});
		}

	},
}
</script>
